import { watch, onBeforeMount, onBeforeUnmount, onMounted, computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'

const { body } = document
const WIDTH = 992

export default function () {
    const store = useStore()
    const route = useRoute()

    const device = computed(() => store.state.app.device)
    const sidebar = computed(() => store.state.app.sidebar)

    onBeforeMount(() => {
        window.addEventListener('resize', $_resizeHandler)
    })

    onBeforeUnmount(() => {
        window.removeEventListener('resize', $_resizeHandler)
    })

    onMounted(() => {
        const isMobile = $_isMobile()
        if (isMobile) {
            store.dispatch('app/toggleDevice', 'mobile')
            store.dispatch('app/closeSideBar', { withoutAnimation: true })
        }
    })

    watch(route, () => {
        if (device.value === 'mobile' && sidebar.value.opened) {
            store.dispatch('app/closeSideBar', { withoutAnimation: false })
        }
    })

    const $_isMobile = () => {
        const rect = body.getBoundingClientRect()
        return rect.width - 1 < WIDTH
    }
    const $_resizeHandler = () => {
        if (!document.hidden) {
            const isMobile = $_isMobile()
            store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
            if (isMobile) {
                store.dispatch('app/closeSideBar', { withoutAnimation: true })
            }
        }
    }
}
